<template>
	<div class="basic">
		<el-form :model="form" :rules="rules" ref="ruleForm" label-width="150px">
			<div class="container add_edit">
				<h3 class="margin_b_20">基本信息</h3>
				<div>
					<el-form-item label="分类" prop="cid" ref="cid">
						<el-cascader v-model="form.cid" :options="categoryOptions" ref="cascaderObj"
							@change="categoryChange" filterable 
							:props="{ expandTrigger: 'hover', checkStrictly: true, emitPath: false, value: '_id', label: 'name',mulitiple:true }"
							clearable>
							<template slot-scope="{ node, data }">
								<div @click="categoryChange(data._id)" class="cascader">{{data.name}}</div>
							</template>
						</el-cascader>
					</el-form-item>
					<el-form-item label="排序">
						<el-input v-model.number="form.sort" placeholder="请输入排序" type="number" :min="1" clearable
							oninput="value = parseInt(value) || 1">
						</el-input>
						<div class="remark_txt">数字越小，排名越靠前</div>
					</el-form-item>
					<el-form-item label="商品名称" prop="name" ref="name">
						<el-input placeholder="请输入商品名称" v-model="form.name" clearable></el-input>
					</el-form-item>
					<!-- <el-form-item label="权益ID">
						<el-input placeholder="权益ID" v-model="form.entitlement_id" clearable></el-input>
					</el-form-item> -->
					<el-form-item label="推广词">
						<el-input type="textarea" :autosize="{ minRows: 3 }" v-model="form.name_pw"
							placeholder="请输入推广词"></el-input>
						<div class="remark_txt">非必填</div>
					</el-form-item>
				</div>
			</div>
			<div class="container add_edit">
				<h3 class="margin_b_20">商品信息</h3>
				<div>
					<el-form-item label="限时抢购">
						<el-checkbox v-model.number="form.limited" :true-label="1" :false-label="0">显示</el-checkbox>
						<div class="remark_txt">此分类将决定商品信息显示在限时抢购分类下</div>
					</el-form-item>
					<el-form-item label="新福利">
						<el-checkbox v-model.number="form.hot" :true-label="1" :false-label="0">显示</el-checkbox>
						<div class="remark_txt">此分类将决定商品信息显示在新福利分类下</div>
					</el-form-item>
					<el-form-item label="商品标签">
						<el-checkbox-group v-model="goodsDatas">
							<el-checkbox v-for="item in goodsTags" :label="item.name" :key="item._id"></el-checkbox>
						</el-checkbox-group>
						<div class="remark_txt">此选项表示商品所属标签</div>
					</el-form-item>
					<!-- <el-form-item label="服务标签">
						<el-checkbox-group v-model="serveDatas">
							<el-checkbox v-for="item in serveTags" :label="item.name" :key="item._id"></el-checkbox>
						</el-checkbox-group>
						<div class="remark_txt">此选项表示商品对应的服务项</div>
					</el-form-item> -->
					<el-form-item label="商城价" prop="price" ref="price">
						<el-input :disabled="sku" v-model.number="form.price" placeholder="请输入商城价" type="number"
							:min="0" clearable oninput="value = parseInt(value)">
						</el-input>
						<div class="remark_txt">单位为分，{{ form.price || 0 }} 分 = {{ form.price / 100 }} 元</div>
					</el-form-item>
					<el-form-item label="原价" prop="market_price" ref="market_price">
						<el-input :disabled="sku" v-model.number="form.market_price" placeholder="请输入原价" type="number"
							min="0" clearable oninput="value = parseInt(value)"></el-input>
						<div class="remark_txt">单位为分，{{ form.market_price || 0 }} 分 = {{ form.market_price / 100 }} 元
						</div>
					</el-form-item>
					<el-form-item label="调货价" prop="transfer_price" ref="transfer_price">
						<el-input v-model.number="form.transfer_price" placeholder="请输入调货价" type="number" min="0"
							clearable oninput="value = parseInt(value)"></el-input>
						<div class="remark_txt">单位为分，{{ form.transfer_price || 0 }} 分 = {{ form.transfer_price / 100 }}
							元
						</div>
					</el-form-item>
					<el-form-item label="价格规则">
						<el-radio-group v-model="form.price_way">
							<el-radio label="输入">输入</el-radio>
							<el-radio label="打折">打折</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item v-for="(item, i) in form.level_price" :key="i" :label="item.name">
						<div v-if="form.price_way==='输入'">
							<el-input v-model.number="item.price" placeholder="请输入价格" type="number" :min="0" clearable
								oninput="value = parseInt(value)">
							</el-input>
							<div class="remark_txt">单位为分，{{ item.price || 0 }} 分 = {{ item.price / 100 }} 元</div>
						</div>
						<div v-else>
							<el-input v-model="item.price_rebate" placeholder="请输入折扣" type="mumber" step="0.01"
								max="10">
							</el-input>
							<div class="remark_txt">折扣不能超过10</div>
						</div>
					</el-form-item>
					<!-- <el-form-item v-else >
						<el-input v-model.number="form.price_rebate" placeholder="请输入折扣" type="mumber"
							:max="10" >
						</el-input>
						<div class="remark_txt">折扣不能超过10</div>
					</el-form-item> -->
					<el-form-item label="库存" prop="stock_num" ref="stock_num">
						<el-input :disabled="sku" v-model.number="form.stock_num" placeholder="请输入库存" type="number"
							:min="0" clearable oninput="value = parseInt(value)">
						</el-input>
					</el-form-item>
					<el-form-item label="限购量" prop="limit" ref="limit">
						<el-input disabled v-model.number="form.limit" placeholder="请输入限购量" type="number" :min="0"
							clearable oninput="value = parseInt(value)">
						</el-input>
						<div class="remark_txt">0为不限购</div>
					</el-form-item>
					<!-- <el-form-item label="分销">
						<el-switch v-model="form.is_fxs" active-color="#ff6a6c" inactive-color="#bbb" active-value="是"
							inactive-value="否" @change="fxsChange"></el-switch>
					</el-form-item>
					<el-form-item label="上级返利比例" prop="rebate_ratio" ref="rebate_ratio">
						<el-input v-model.number="form.rebate_ratio" placeholder="请输入上级返利比例" type="number" :min="0"
							:max="100" clearable :disabled="form.is_fxs != '是'" oninput="value = parseInt(value)">
						</el-input>
						<div class="remark_txt">上级返利比例 {{ form.rebate_ratio }}%</div>
					</el-form-item>
					<el-form-item label="上上级返利比例" prop="rebate_ratio2" ref="rebate_ratio2">
						<el-input v-model.number="form.rebate_ratio2" placeholder="请输入上上级返利比例" type="number" :min="0"
							:max="100" clearable :disabled="form.is_fxs != '是'" oninput="value = parseInt(value)">
						</el-input>
						<div class="remark_txt">上上级返利比例 {{ form.rebate_ratio2 }}%</div>
					</el-form-item> -->
					<!-- <el-form-item label="VIP">
						<el-switch v-model="form.is_vip" active-color="#ff6a6c" inactive-color="#bbb" active-value="是"
							inactive-value="否" @change="vipChange"></el-switch>
					</el-form-item>
					<el-form-item label="VIP价" prop="vip_price" ref="vip_price">
						<el-input v-model.number="form.vip_price" placeholder="请输入VIP价" type="number" :min="0" clearable
							:disabled="form.is_vip != '是' || sku" oninput="value = parseInt(value)"></el-input>
						<div class="remark_txt">单位为分，{{ form.vip_price || 0 }} 分 = {{ form.vip_price / 100 }} 元</div>
					</el-form-item> -->
					<el-form-item label="已出售数">
						<div class="dflex_d_c">
							<el-input v-model.number="form.sale_cnt" placeholder="请输入已出售数" type="number" :min="0"
								clearable oninput="value = parseInt(value) || 0"></el-input>
							<el-checkbox class="checkbox" v-model.number="form.sale" :true-label="1" :false-label="0">显示
							</el-checkbox>
						</div>
						<div class="remark_txt">勾选此选项将作虚拟销量</div>
					</el-form-item>
					<el-form-item label="已访问数">
						<div class="dflex_d_c">
							<el-input v-model.number="form.visit_cnt" placeholder="请输入已访问数" type="number" :min="0"
								clearable oninput="value = parseInt(value) || 0"></el-input>
							<el-checkbox class="checkbox" v-model.number="form.visit" :true-label="1" :false-label="0">
								显示</el-checkbox>
						</div>
						<div class="remark_txt">勾选此选项将作访问销量</div>
					</el-form-item>
					<el-form-item label="已收藏数">
						<div class="dflex_d_c">
							<el-input v-model.number="form.collect_cnt" placeholder="请输入已收藏数" type="number" :min="0"
								clearable oninput="value = parseInt(value) || 0"></el-input>
							<el-checkbox class="checkbox" v-model.number="form.collect" :true-label="1"
								:false-label="0">显示</el-checkbox>
						</div>
						<div class="remark_txt">勾选此选项将作收藏销量</div>
					</el-form-item>
					<el-form-item label="已分享数">
						<div class="dflex_d_c">
							<el-input v-model.number="form.share_cnt" placeholder="请输入已分享数" type="number" :min="0"
								clearable oninput="value = parseInt(value) || 0"></el-input>
							<el-checkbox class="checkbox" v-model.number="form.share" :true-label="1" :false-label="0">
								显示</el-checkbox>
						</div>
						<div class="remark_txt">勾选此选项将作分享销量</div>
					</el-form-item>
					<!-- <el-form-item label="下架时间" prop="sold_out_time" ref="sold_out_time">
						<el-date-picker ref="datetime" v-model="form.sold_out_time" type="datetime" :editable="false"
							placeholder="下架时间" align="center" popper-class="goods_basic_time" class="time"
							format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
							:picker-options="pickerTimeOptions"></el-date-picker>
					</el-form-item> -->
					<el-form-item label="状态">
						<el-radio-group v-model="form.state">
							<el-radio label="待审核">待审核</el-radio>
							<el-radio label="销售中">销售中</el-radio>
							<el-radio label="已下架">已下架</el-radio>
						</el-radio-group>
					</el-form-item>
				</div>
			</div>
		</el-form>
	</div>
</template>

<script>
	export default {
		data() {
			const validatePrice = async (rule, value, callback) => {
				if (value === 0) {
					return callback(new Error('商城价不能为0'));
				}

				if (!value || value < 0) {
					return callback(new Error('请输入商城价'));
				}

				callback();
			};
			const validateRebateRatio = async (rule, value, callback) => {
				if (this.form.is_fxs == '是' && value === '') {
					return callback(new Error('请输入上级返利比例'));
				}

				if (this.form.is_fxs == '是' && !/^([0-9]{1,2}|100)$/.test(value)) {
					return callback(new Error('上级返利比例只能 0~100'));
				}

				callback();
			};
			const validateRebateRatio2 = async (rule, value, callback) => {
				if (this.form.is_fxs == '是' && value === '') {
					return callback(new Error('请输入上上级返利比例'));
				}

				if (this.form.is_fxs == '是' && !/^([0-9]{1,2}|100)$/.test(value)) {
					return callback(new Error('上上级返利比例只能 0~100'));
				}

				callback();
			};
			const validateVipPrice = async (rule, value, callback) => {
				if (this.form.is_vip == '是' && value === 0 && !this.sku) {
					return callback(new Error('VIP价不能为0'));
				}

				if (this.form.is_vip == '是' && (!value || value < 0) && !this.sku) {
					return callback(new Error('请输入VIP价'));
				}

				callback();
			};
			return {
				categoryOptions: [],
				goodsDatas: [],
				serveDatas: [],
				goodsTags: [],
				serveTags: [],
				levels: [],
				form: {
					level_price: [],
					entitlement_id: "",
					cid: '',
					cids: [],
					sort: 0,
					name: '',
					name_pw: '',
					limited: 0,
					limited_sort: 0,
					hot: 0,
					hot_sort: 0,
					search_tags: [],
					tags: [],
					price: 0,
					market_price: 0,
					transfer_price:0,
					limit: 0,
					stock_num: 0,
					is_fxs: '否',
					rebate_ratio: 0,
					rebate_ratio2: 0,
					is_vip: '否',
					vip_price: 0,
					sale_cnt: 0,
					sale: 0,
					visit_cnt: 0,
					visit: 0,
					collect_cnt: 0,
					collect: 0,
					share_cnt: 0,
					share: 0,
					price_way: "输入",
					sold_out_time: '',
					state: '待审核',
				},
				sku: false,
				pickerTimeOptions: {
					disabledDate(time) {
						return time.getTime() < Date.now();
					}
				},
				rules: {
					cid: [{
						required: true,
						message: '请选择分类',
						trigger: 'change'
					}],
					name: [{
						required: true,
						message: '请输入商品名称',
						trigger: 'change'
					}],
					price: [{
						required: true,
						validator: validatePrice,
						trigger: 'change'
					}],
					market_price: [{
						required: true,
						message: '请输入原价',
						trigger: 'change'
					}],
					transfer_price: [{
						required: true,
						message: '请输入调换价',
						trigger: 'change'
					}],
					rebate_ratio: [{
						required: true,
						validator: validateRebateRatio,
						trigger: 'change'
					}],
					rebate_ratio2: [{
						required: true,
						validator: validateRebateRatio2,
						trigger: 'change'
					}],
					vip_price: [{
						required: true,
						validator: validateVipPrice,
						trigger: 'change'
					}],
					stock_num: [{
						required: true,
						message: '请输入库存',
						trigger: 'change'
					}],
					sold_out_time: [{
						required: true,
						message: '请选择下架时间',
						trigger: 'change'
					}]
				}
			};
		},
		methods: {
			setChildren(res) {
				res.forEach(item => {
					if (item.children && item.children.length <= 0) {
						item.children = null;
						return;
					}

					this.setChildren(item.children);
				});
			},
			setBaseData(res) {
				this.setChildren(res[0].datas);
				this.categoryOptions = res[0].datas;
				this.goodsTags = res[1].datas.filter(x => x.type == '商品' && x.state == '启用');
				this.serveTags = res[1].datas.filter(x => x.type == '服务' && x.state == '启用');
				this.levels = res[2].datas
				this.form.level_price = this.levels;
			},
			setSort(res) {
				this.form.sort = ++res;
			},
			submitData(callback) {
				/* let levels=this.form.level_price
				for(var i in levels){
					this.form.level_price.push({
						id:levels[i]._id,
						name:levels[i].name,
						price:levels[i].price
					})
				} */
				this.$refs.ruleForm.validate((valid, obj) => {
					this.$api.set_unvalidated_form_focus(this, obj);
					if (valid) {
						this.form.search_tags = this.goodsDatas;
						this.form.tags = this.serveDatas;

						let cascaderObj = this.$refs.cascaderObj.getCheckedNodes();
						this.form.cids = cascaderObj[0].path;

						if (typeof callback === 'function') {
							callback(this.form, valid);
						}
					} else {
						if (typeof callback === 'function') {
							callback(this.form, valid);
						}
						return false;
					}
				});
			},
			getData(callback) {
				let cascaderObj = this.$refs.cascaderObj.getCheckedNodes();
				if (!cascaderObj[0]) {
					this.form.cid = '';
					this.form.cids = [];
				}

				this.submitData(callback);
			},
			setData(data) {
				data.search_tags = data.search_tags || [];
				data.tags = data.tags || [];
				data.cids = data.cids || [];
				data.level_price = data.level_price || this.levels
				this.goodsDatas = data.search_tags.filter(x => this.goodsTags.find(t => t.name == x));
				this.serveDatas = data.tags.filter(x => this.serveTags.find(t => t.name == x));
				this.form.cid = data.cid;
				data.rebate_ratio = data.rebate_ratio || 0;
				data.vip_price = data.vip_price || 0;

				for (const key in this.form) {
					if (this.form.hasOwnProperty(key) && key != 'cid') {
						this.form[key] = data[key];
					}
				}
			},
			categoryChange(id) {
				this.form.cid = id || '';
				if (this.form.cid) {
					this.$refs.cid.clearValidate();
				}
				this.$refs.cascaderObj.dropDownVisible = false;
			},
			fxsChange(res) {
				if (res == '否') {
					this.$refs.rebate_ratio.clearValidate();
					this.$refs.rebate_ratio2.clearValidate();
				}

				if (res == '是' && !/^([0-9]{1,2}|100)$/.test(this.form.rebate_ratio)) {
					this.$refs.ruleForm.validateField('rebate_ratio');
				}

				if (res == '是' && !/^([0-9]{1,2}|100)$/.test(this.form.rebate_ratio2)) {
					this.$refs.ruleForm.validateField('rebate_ratio2');
				}
			},
			vipChange(res) {
				if (res == '否') {
					this.$refs.vip_price.clearValidate();
				}

				if (res == '是' && !this.form.vip_price) {
					this.$refs.ruleForm.validateField('vip_price');
				}
			}
		},
		mounted() {
			uni.$on('sku', sku => {
				this.sku = sku;
			})

			const ele = document.querySelector('.el-tabs__content');

			this.$nextTick(() => {
				ele.addEventListener('scroll', () => {
					if (this.$refs.cascaderObj && this.$refs.cascaderObj.dropDownVisible) {
						this.$refs.cascaderObj.dropDownVisible = false;
					}
					if (this.$refs.datetime && this.$refs.datetime.pickerVisible) {
						this.$refs.datetime.pickerVisible = false;
					}
				});
			});
		}
	};
</script>

<style>
	.cascader {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		padding-left: 44px;
		z-index: 99;
	}

	.checkbox.el-checkbox {
		width: 54px;
	}
</style>